<template>
	<view class="lottery">
		<headTop>
			<uv-navbar title="抽奖列表" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="bg-img">
			<img src="@/static/images/DZPBJ.png" style="width: 100vw; height: calc(100vh - 40px)" />
		</view>
		<view class="dialer">
			<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer">
				<image slot="border" src="@/static/images/BJ.png"
					style="width: 110%; height: 110%; transform: translate(-5%, -4%)" />
			</l-dialer>
			<view
				style="position: relative; left: 50%; transform: translate(-50%); z-index: 100; width: 200px; top: 100rpx">
				<view style="position: absolute; z-index: 101">
					<img src="@/static/images/anniu.png" style="width: 200px; height: 50px" />
				</view>
				<view
					style="color: #90290a; font-size: 16px; font-weight: bold; position: absolute; z-index: 102; top: 13px; left: 27px; text-align: center">
					您还有{{ limit }}次抽奖机会
				</view>
			</view>
		</view>

		<uni-popup ref="popupRef" type="center" style="z-index: 999">
			<view class="popup-content">
				<img v-if="hint.img === 'tankuang1'" src="@/static/images/tankuang1.png" style="width: 80vw" />
				<img v-else src="@/static/images/tankuang1.png" style="width: 80vw" />
				<view
					style="color: #90290a; background-color: #fef1cf; padding: 12px 0; border-radius: 10px; margin: 0 auto; text-align: center; transform: translate(0, -200rpx); width: 50vw">
					{{ hint.name }}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { lotteryApi } from "@/api/index";
	import headTop from "@/components/headTop/index.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	const prizeList = ref([]);
	const dialer = ref();
	const detailId = ref();
	const limit = ref();
	const hint = ref({ name: "", img: "" });

	const getList = async (id) => {
		try {
			const res = await lotteryApi.getdetail({ id: Number(id) });
			limit.value = await res.data.limit;
			detailId.value = await res.data.id;
			prizeList.value = await res.data.prize_list;
			prizeList.value.forEach((item, index) => {
				item.img = item.image;
				item.index = index;
			});
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};

	const onDone = (index) => {
		openPopup();
	};

	const onClick = async () => {
		try {
			const res = await lotteryApi.draw({ id: detailId.value });
			prizeList.value.forEach((item, index) => {
				if (res.data.name === item.name) {
					dialer.value.run(item.index);
				}
			});

			await getList(detailId.value);

			if (res.data.type === "no") {
				hint.value.name = res.data.name;
				hint.value.img = "tankuang2";
			} else {
				hint.value.name = res.data.name;
				hint.value.img = "tankuang1";
			}
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};

	const popupRef = ref(null);

	const openPopup = () => {
		popupRef.value?.open();
	};

	const closePopup = () => {
		popupRef.value?.close();
	};

	/* -----------------------------------------------跳转上一步------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	onLoad((options) => {
		getList(options.id);
	});
</script>

<style lang="scss">
	.lottery {
		background-color: #dd0127;
		position: relative;

		.bg-img {
			position: absolute;
			z-index: 1;
		}

		.dialer {
			position: absolute;
			top: 50vh;
			left: 50vw;
			z-index: 99;
			transform: translate(-50%, -35%);
		}
	}
</style>